<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-04 14:20:10
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-07-13 16:07:37
 * @FilePath: /things-admin/src/view/dataScreen/components/header/header.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="header">
    <Time class="time"  />
    <!-- <div class="header_adress">浙江</div> -->
    <!-- <div class="header_weather">
      <img class="header_img" src="../../images/weather.png" alt="" />
    </div> -->
    <!-- <div class="temperature">6℃~10℃</div>
    <div class="air_quality">空气质量</div> -->
    <!-- <div class="color"></div> -->
    <img
      class="isfull"
      :src="isfull ? exitFullScreen : fullScreen"
      alt=""
      @click="Screen"
    />
    <div class="ai">小艾</div>
    <img v-if="!isfull" class="out_img" src="../../images/out.png" alt="" @click="outPage" />
  </div>
</template>

<script>
import Time from "./time";
export default {
  components: { Time },
  data() {
    return {
      fullScreen: require("../../images/fullscreen.png"),
      exitFullScreen: require("../../images/exitfullscreen.png"),
      isfull: null,
    };
  },
  methods: {
    //退出数据大屏
    outPage() {
      if (!this.isfull) this.$router.go(-1);
    },
    //全屏
    Screen() {
      //直接进入全屏模式
      const element = document.documentElement;
      //判断是否全屏
      if (this.isfull) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullscreen) {
          /* Safari */
          element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
          /* IE11 */
          element.msRequestFullscreen();
        }
      }
    },
    isFUllScreen(){
      this.isfull = document.fullscreenElement? true : false
    }
  },
  mounted(){
    //监听屏幕尺寸变化 来判断全屏切换
    window.addEventListener("resize", this.isFUllScreen);
  },
  beforeDestroy(){
    // 销毁全局监听事件
    window.addEventListener("resize", this.isFUllScreen);
  }
};
</script>

<style lang="less" scoped>
.header {
  width: 1920px;
  height: 67.5px;
  background: url(../../images/Group3500@2x.png) no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  .time {
  margin-left: 1440.5px;
  width: 260px;
  height: 21px;
  font-size: 17px;
  font-weight: 400;
  color: #ffffff;
  line-height: 21px;
  z-index: 200;
}
 
  .header_adress {
    width: 34px;
    height: 21px;
    font-size: 17px;
    font-weight: 400;
    color: #d5ffff;
    line-height: 21px;
    position: relative;
    z-index: 200;
    margin-left: 67.5px;
  }
  .header_img {
    margin-left: 10px;
    width: 44px;
    height: 41px;
  }
  .temperature {
    margin-left: 17px;
    width: 77px;
    height: 23px;
    font-size: 17px;
    font-weight: 400;
    color: #d5ffff;
    line-height: 23px;
  }
  .air_quality {
    width: 60px;
    height: 18px;
    font-size: 15px;
    font-weight: 400;
    color: #d5ffff;
    margin-left: 19.5px;
    margin-bottom: 5px;
  }
  .color {
    width: 21px;
    height: 13px;
    background: #009743;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    margin-left: 5px;
    margin-bottom: 3px;
  }
  .isfull {
    width: 20px;
    height: 20px;
    margin: 0 35px;
    cursor: pointer;
    margin-bottom: 6px;

  }
  .ai {
    width: 34px;
    height: 21px;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    line-height: 21px;
    margin-left: 0px;
    margin-bottom: 3px;
  }

  .out_img {
    cursor: pointer;
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
  }
}

</style>
